<template>
  <div>
    <!-- 首页导航 -->
    <Navs></Navs>
    <!-- content -->
    <section class="content">
      <div class="content_cont">
        <!-- 全局搜索 -->
        <search></search>
        <!-- 主内容 -->
        <div class="mainCont">
          <div class="header">
            <div class="left">{{posaite[dataPos]}}</div>
            <div class="right">
              <img :src="imgurl.pos" alt />
              <span>当前位置：</span>
              <span @click="$router.push('/')">首页</span>
              >
              <span @click="$router.go(0)">数据</span>
            </div>
          </div>
          <!-- 中间部分 -->
          <div class="data_title" v-if="cutStateSeach==='simpleness'">
            <div
              v-for="(item,index) in titleDatas"
              :key="index"
              @mouseover="mouseoverAllCate('hierarchy1',index)"
              @mouseleave="mouseleaveAllCate('hierarchy1',index)"
              @click="clickAllCate('hierarchy1',index)"
            >
              <img :src="item.iconUrl" alt />
              <span v-if="computStatic(index,titleDatas)">{{item.text}}</span>
              <div
                v-if="index===(titleDatas.length-1)||index===(titleDatas.length-2)"
                class="title_relative"
              >
                <div>{{item.text}}</div>
                <div class="title_div" v-if="item.static">
                  <div
                    v-for="(list,key) in item.secondText"
                    :key="key"
                    @mouseover="mouseoverCate('hierarchy2',key)"
                    @mouseleave="mouseleaveCate('hierarchy2',key)"
                    @click.stop="clickCate('hierarchy2',key,list.text)"
                  >
                    {{list.text}}
                    <div class="secondWindow" v-if="list.text==='统计' && list.static">
                      <div v-for="(item2,index2) in item.threeText" :key="index2">
                        <div
                          @mouseover="mouseoverThree('hierarchy3',index2)"
                          @mouseleave="mouseleaveThree('hierarchy3',index2)"
                        >
                          {{item2.text}}
                          <div class="threeWindow" v-if="item2.text==='对行运算' && item2.static">
                            <div
                              v-for="(item3,index3) in item.fourText"
                              :key="index3"
                              @click="computedLine(item3.text)"
                            >{{item3.text}}</div>
                          </div>
                          <div class="threeWindow" v-if="item2.text==='对列运算' && item2.static">
                            <div
                              v-for="(item3,index3) in item.fourText"
                              :key="index3"
                              @click="computedList(item3.text)"
                            >{{item3.text}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="data_title" v-if="cutStateSeach==='advanced'">
            <div
              v-for="(item,index) in titleDatas"
              :key="index"
              @mouseover="mouseoverAllCate('hierarchy1',index)"
              @mouseleave="mouseleaveAllCate('hierarchy1',index)"
              @click="clickAllCate('hierarchy1',index)"
            >
              <img :src="item.iconUrl" alt v-if="index<3" />
              <div v-if="index<3" class="title_relative">
                <div>{{item.text}}</div>
              </div>
            </div>
            <div class="searchData" @click="clickAllCate('hierarchy1','search')">查询数据</div>
          </div>
          <div class="data_title" v-if="cutStateSeach==='map'">
            <div
              v-for="(item,index) in titleDatas"
              :key="index"
              @mouseover="mouseoverAllCate('hierarchy1',index)"
              @mouseleave="mouseleaveAllCate('hierarchy1',index)"
              @click="clickAllCate('hierarchy1',index)"
              :style="{position:index>=4?'absolute':'','margin-left':index===3?'33rem':''}"
            >
              <img :src="item.iconUrl" alt v-if="index<4" />
              <span v-if="index<4">{{item.text}}</span>
            </div>
          </div>
          <div
            class="data_content"
            :style="{'height':indStatic===0?'59.0125rem':'91.125rem'}"
            v-if="cutStateSeach==='simpleness'"
          >
            <div
              class="data_left"
              :style="{'width':(left!=initValue?left>initValue?(25.375+computedNumberRem(left-initValue)):(25.375-computedNumberRem(initValue-left)):25.375)+'rem','height':'100%'}"
            >
              <!-- 左侧导航 -->
              <el-row class="tac" v-if="leftCateData">
                <el-col :span="24">
                  <el-menu
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    @select="selectActive"
                    :unique-opened="true"
                    style="border:none"
                    active-text-color="#303133"
                  >
                    <!-- 最外层 -->
                    <el-submenu
                      :index="''+index1"
                      v-for="(item1,index1) in leftCateData"
                      :key="index1"
                      :style="{'background-color':$store.state.selectDataLeft.id===item1.id?'#95CEE4':''}"
                    >
                      <template slot="title">{{item1.name}}</template>
                      <!-- 第一层 -->
                      <template v-for="(item2,index2) in item1.children">
                        <el-submenu
                          :index="''+index1+'-'+index2"
                          :key="index2"
                          v-if="item2.children!==undefined"
                          :style="{'background-color':$store.state.selectDataLeft.id===item2.id?'#95CEE4':''}"
                        >
                          <template slot="title">{{item2.name}}</template>
                          <!-- 第二层 -->
                          <template v-for="(item3,index3) in item2.children">
                            <el-submenu
                              :index="''+index1+'-'+index2+'-'+index3"
                              :key="index3"
                              v-if="item3.children!==undefined"
                              :style="{'background-color':$store.state.selectDataLeft.id===item3.id?'#95CEE4':''}"
                            >
                              <template slot="title">{{item3.name}}</template>
                              <!-- 第三层 -->
                              <template v-for="(item4,index4) in item3.children">
                                <el-submenu
                                  :index="index1+'-'+index2+'-'+index3+'-'+index4"
                                  :key="index4"
                                  v-if="item4.children!==undefined"
                                  :style="{'background-color':$store.state.selectDataLeft.id===item4.id?'#95CEE4':''}"
                                >
                                  <template slot="title">{{item4.name}}</template>
                                  <!-- 第四层 -->
                                  <template v-for="(item5,index5) in item4.children">
                                    <el-submenu
                                      :index="index1+'-'+index2+'-'+index3+'-'+index4+'-'+index5"
                                      :key="index5"
                                      v-if="item5.children!==undefined"
                                      :style="{'background-color':$store.state.selectDataLeft.id===item5.id?'#95CEE4':''}"
                                    >
                                      <template slot="title">{{item5.name}}</template>
                                      <!-- 待定添加 -->
                                      <!-- 待定添加 -->
                                    </el-submenu>
                                    <el-menu-item
                                      :index="index1+'-'+index2+'-'+index3+'-'+index4+'-'+index5"
                                      :key="index5"
                                      v-if="item5.children===undefined"
                                      :style="{'background-color':$store.state.selectDataLeft.id===item5.id?'#95CEE4':''}"
                                    >{{item5.name}}</el-menu-item>
                                  </template>
                                </el-submenu>
                                <el-menu-item
                                  :index="index1+'-'+index2+'-'+index3+'-'+index4"
                                  :key="index4"
                                  v-if="item4.children===undefined"
                                  :style="{'background-color':$store.state.selectDataLeft.id===item4.id?'#95CEE4':''}"
                                >{{item4.name}}</el-menu-item>
                              </template>
                            </el-submenu>
                            <el-menu-item
                              :index="''+index1+'-'+index2+'-'+index3"
                              :key="index3"
                              v-if="item3.children===undefined"
                              :style="{'background-color':$store.state.selectDataLeft.id===item3.id?'#95CEE4':''}"
                            >{{item3.name}}</el-menu-item>
                          </template>
                        </el-submenu>
                        <el-menu-item
                          :index="''+index1+'-'+index2"
                          v-if="item2.children===undefined"
                          :key="index2"
                          :style="{'background-color':$store.state.selectDataLeft.id===item2.id?'#95CEE4':''}"
                        >{{item2.name}}</el-menu-item>
                      </template>
                    </el-submenu>
                    <!-- <template v-if="item2.children===undefined">
                        <el-menu-item
                          :index="index1+'-'+index2+'-'+index3"
                          v-for="(item3,index3) in item2.children"
                          :key="index3"
                          :style="{'background-color':$store.state.selectDataLeft.id===item3.id?'#95CEE4':''}"
                        >{{item3.name}}</el-menu-item>
                    </template>-->
                  </el-menu>
                </el-col>
              </el-row>
            </div>
            <div class="data_center">
              <div>..</div>
              <div>..</div>
              <div>..</div>
              <div>..</div>
              <div>..</div>
              <div>..</div>
              <div>..</div>
            </div>
            <div
              class="data_right"
              :style="{'width':(left!=initValue?left>initValue?(58.125-computedNumberRem(left-initValue)):(58.125+computedNumberRem(initValue-left)):58.125)+'rem','height':'100%'}"
            >
              <!-- 列表 -->
              <!-- 图标切换 -->
              <ChartsCut
                v-show="$store.state.classifyIdDataState"
                @cutStatic="cutStatic"
                :defaultDataRight="defaultDataRight"
                @stateTell="stateTell"
                @comTime="comTime"
                :stateDataGetVal="stateDataGetVal"
                @stateDFGHJ="stateDFGHJ"
                @statertfResu="statertfResu"
                :labelAreaState="labelAreaState"
                :areaDimensionStateS="areaDimensionStateS"
                @emmitStateAd="emmitStateAd"
                :labelAreaStateks="labelAreaStateks"
                :loading.sync="loading"
                ref="childChartsCut"
              ></ChartsCut>
              <!-- 列表内容 -->
              <ChartsCont
                ref="childChartCont"
                :indStatic="indStatic"
                :chartsStatusMegger="chartsStatusMegger"
                :defaultDataRight="defaultDataRight"
                :stateTells="stateTells"
                :statesDf="statesDf"
                @tellAreadly="tellAreadly"
                @prentsState="prentsState"
                @stateDataGet="stateDataGet"
                :showTableState="showTableState"
                @statertyui="statertyui"
                :areaDimensionStateS="areaDimensionStateS"
                :advancedStates="advancedStates"
                @tellParentsShowClos="tellParentsShowClos"
                @tellChangeFan="tellChangeFan"
              ></ChartsCont>
            </div>
            <div class="container">
              <VueDragResize
                :isActive="true"
                :isResizable="false"
                :w="10"
                :h="120"
                :z="0"
                :x="computedNumberPx(200)"
                :parentLimitation="true"
                @resizing="resizeEvents"
                @dragging="resizeEvents"
                axis="x"
                style="position:relative;border:none;display: flex;flex-direction:column;justify-content: center;align-items: center;pointer-events:auto;"
              >
                <!-- <h3>Hello World!</h3>
                <p>{{ top }} х {{ left }}</p>
                <p>{{ width }} х {{ height }}</p>-->
              </VueDragResize>
            </div>
          </div>
          <AdvancedQuery v-if="cutStateSeach==='advanced'"></AdvancedQuery>
          <MapData v-if="cutStateSeach==='map'"></MapData>
          <div
            class="advancedStyle"
            v-if="cutStateSeach==='advanced'"
            @click="clickAllCate('hierarchy1','search')"
          >
            <div>查询数据</div>
          </div>
        </div>
      </div>
    </section>
    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
    <!-- 指标解释 -->
    <LabelExplain v-if="$store.state.labelExplainState"></LabelExplain>
    <!-- 新增指标 -->
    <InsertLabel v-if="$store.state.insertWindowState" @emitState="emitStatesd"></InsertLabel>
    <!-- 筛选 -->
    <ScreenCom v-if="$store.state.selcettWindowState" @emitState="emitStatesd"></ScreenCom>
    <!-- 编辑 -->
    <EditCom v-if="$store.state.editWindowState" @emitState="emitStatesd">></EditCom>
    <!-- 添加收藏 -->
    <AddCollect v-if="$store.state.addCollectState"></AddCollect>
    <!-- 维度转换 -->
    <!--地区-->
    <Dimension
      ref="childDimension"
      v-show="$store.state.dimensionState"
      @changeValue="changeValue"
      @areaDimensionState="areaDimensionState"
    ></Dimension>
    <!-- 维度转换 -->
    <!--非地区-->
    <NoAreaDimension v-if="$store.state.noAreadimensionState" @changeSetZZ="changeValue"></NoAreaDimension>
  </div>
</template>

<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
// 全局搜索
import search from '@/components/search/search.vue'
// 引入拖拽组件
import VueDragResize from 'vue-drag-resize'
// 引入图表切换组件
import ChartsCut from '@/components/chartsCut/ChartsCut.vue'
// 引入图表组件
import ChartsCont from '@/components/chartsCont/ChartsCont.vue'
// 引入高级查询组件
import AdvancedQuery from '@/components/advancedQuery/AdvancedQuery.vue'
// 引入数据地图组件
import MapData from '@/components/mapData/MapData.vue'
// 新增指标组件
import InsertLabel from '@/components/insertLabel/InsertLabel.vue'
// 筛选
import ScreenCom from '@/components/screenCom/ScreenCom.vue'
// 编辑
import EditCom from '@/components/editCom/EditCom.vue'
// 添加收藏
import AddCollect from '@/components/addCollect/AddCollect.vue'
// 指标解释
import LabelExplain from '@/components/labelExplain/LabelExplain.vue'
// 维度转换  地区
import Dimension from '@/components/dimension/Dimension.vue'
// 维度转换  非地区
import NoAreaDimension from '@/components/noAreaDimension/NoAreaDimension.vue'
// 引入数据计算js用于机选渲染的数据
import ComputedData from '../../assets/js/computeddata'
// 引入全局的createObjectUrl用于覆盖window.URL
// import '../../assets/js/createObjectUrl'

export default {
  name: 'index',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor,
    search: search,
    VueDragResize: VueDragResize,
    ChartsCut: ChartsCut,
    ChartsCont: ChartsCont,
    AdvancedQuery: AdvancedQuery,
    MapData: MapData,
    InsertLabel: InsertLabel,
    ScreenCom: ScreenCom,
    EditCom: EditCom,
    AddCollect: AddCollect,
    LabelExplain: LabelExplain,
    Dimension: Dimension,
    NoAreaDimension: NoAreaDimension
  },
  data () {
    return {
      loading: true,
      // 左侧当前默认
      defaultSelectLies: [],
      // 右侧默认显示数据
      defaultDataRight: null,
      // 菜单配置
      activeIndex: '1',
      activeIndex2: '1',
      imgurl: {
        pos: require('../../../static/company/posweizhi.png'),
        tz: require('../../../static/data/tz145.png')
      },
      // 本页所有位置
      posaite: {
        monthly: '月度数据',
        quarter: '季度数据',
        year: '年度数据',
        area: '地区数据'
      },
      // 当前位置状态
      dataPos: null,
      // data_title数据
      titleDatas: [
        { text: '简单查询', iconUrl: require('../../../static/data/jdcx.png') },
        { text: '高级查询', iconUrl: require('../../../static/data/gjcx.png') },
        { text: '数据地图', iconUrl: require('../../../static/data/sjdt.png') },
        { text: '添加收藏', iconUrl: require('../../../static/data/tjsc.png') },
        { text: '导出至Excel', iconUrl: require('../../../static/data/dcexcel.png') },
        {
          text: '数据管理',
          iconUrl: require('../../../static/data/sjgl.png'),
          secondText: [
            { text: '新增指标', static: false },
            { text: '筛选', static: false },
            { text: '统计', static: false },
            { text: '恢复', static: false },
            { text: '清除空行空列', static: false }
          ],
          threeText: [
            { text: '对行运算', static: false },
            { text: '对列运算', static: false }
          ],
          fourText: [
            { text: 'SUM求和', static: false },
            { text: 'x平均数', static: false },
            { text: 'MAX最大值', static: false },
            { text: 'MIN最小值', static: false },
            { text: 'MD中位数', static: false },
            { text: 'MO众数', static: false },
            { text: 'S²方差', static: false },
            { text: 'S标准差', static: false }
          ],
          static: false
        },
        {
          text: '报表管理',
          iconUrl: require('../../../static/data/bbgl.png'),
          secondText: [
            { text: '编辑', static: false },
            { text: '转置', static: false },
            { text: '维度转换', static: false },
            { text: '保存默认', static: false },
            { text: '恢复默认', static: false }
          ],
          static: false
        }
      ],
      // 拖拽start
      width: 10,
      height: 120,
      top: 0,
      left: 147,
      // 拖拽end
      // 初始值
      initValue: null,
      // 重置左、右侧高度
      Heights: null,
      // 切换状态 默认0
      indStatic: 0,
      // 数据管理  =================>
      dataManage: ['新增指标', '筛选', '统计', '恢复', '清除空行空列'],
      // 统计数据
      dataManageTJ: ['对行运算', '对列运算'],
      // 运算
      dataManageTJComputed: ['SUM求和', 'x平均数', 'MAX最大值', 'MIN最小值', 'MD中位数', 'MO众数', 'S²方差', 'S标准差'],
      // 报表管理  ================>
      reportManage: ['编辑', '转置', '维度转换', '保存默认', '恢复默认'],
      // 数据管理状态
      dataManageStatic: {
        mainStatic: false,
        TJStatic: false,
        hangStatic: false,
        lieStatic: false,
        compuStatic: false
      },
      // 图表状态管理器
      chartsStatusMegger: {
        // 转置
        transState: true,
        // 计算状态
        computedStatic: { text: '无', stateType: 'line' }
      },
      leftCateData: null,
      // 简单查询、高级查询、数据地图切换状态(simpleness（简单）、advanced（高级） 、map（地图）)
      cutStateSeach: 'simpleness',
      // 下拉筛选的数据时间
      downLaSelect: '',
      // 下拉筛选的数据地区
      downLaSelectArea: '',
      // 新增指标状态
      statesDf: 1,
      // 数据加载状态
      stateTells: false,
      // 维度转换时(若不是地区数据只进行转置操作)
      changeState: false,
      // 数据请求成功后的状态
      stateDataGetVal: false,
      // 扩展数据完成后
      labelAreaState: false,
      // 清除空行空列
      showTableState: false,
      // 地区数据维度转换状态
      areaDimensionStateS: false,
      // 高级查询数据渲染
      advancedStates: false,
      // 指标与地区互换状态
      labelAreaStateks: false,
      // 存储过滤出来的所有值  左侧菜单
      filterDataArr: null
    }
  },
  watch: {
    changeState (val) {
      if (val) {
        this.chartsStatusMegger.transState = !this.chartsStatusMegger.transState
        this.$store.state.transState = this.chartsStatusMegger.transState
        this.changeState = false
      }
    }
  },
  methods: {
    /*
    * @desc 触发子组件 childChartCont 的downLaSelects方法
    */
    chuFachildChartCont () {
      console.log(this.$refs, 'this.$refs789')
      this.$nextTick(() => {
        this.$refs.childChartCont.downLaSelects()
      })
    },
    // 地区数据维度转换状态
    areaDimensionState (val) {
      console.log(val, 'bbbval')
      this.areaDimensionStateS = !this.areaDimensionStateS
    },
    // 维度转换非地区转置
    changeValue (val) {
      this.changeState = val
    },
    // 获取左侧菜单数据
    getCateData () {
      this.$axios({
        method: 'GET',
        url: 'data/data/list',
        params: {
          type: this.$route.query.type === 'area' ? 2 : 1,
          f: this.$route.query.type === 'area' ? '' : this.$route.query.type
        }
      }).then(res => {
        console.log(res, '左侧菜单')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.leftCateData = res.data.data.list
          this.defaultSelectLie()
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 菜单选中配置
    handleSelect (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClick (tab, event) {
      // console.log(tab, event, '选中')
    },
    // 拖拽事件
    resizeEvents (newRect) {
      console.log(newRect)
      this.width = newRect.width
      this.height = newRect.height
      this.top = newRect.top
      this.left = newRect.left
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath, '菜单展开')
      this.$store.state.openOpenLeft = keyPath
      console.log(key.split('-'))
      let datart = []
      key.split('-').forEach((item, index) => {
        if (index === 0) {
          datart = this.leftCateData[item]
        } else {
          datart = datart.children[item]
        }
      })
      console.log(datart)
      this.defaultDataRight = datart
      this.$store.state.selectDataLeft = this.defaultDataRight
      this.$store.state.selectfilter = this.defaultDataRight.f
      this.$store.state.yesNoClickChange = false
      this.$store.state.timeNum = true
      this.$store.state.yesNoClickZZ = false
      this.$store.state.defaultShowLabelAreaState = 'normal'
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath, '菜单关闭')
    },
    selectActive (key, keyPath) {
      console.log(key, keyPath, '菜单激活')
      this.$store.state.openOpenLeft = keyPath
      console.log(key.split('-'))
      let datart = []
      key.split('-').forEach((item, index) => {
        if (index === 0) {
          datart = this.leftCateData[item]
        } else {
          datart = datart.children[item]
        }
      })
      console.log(datart)
      this.defaultDataRight = datart
      this.$store.state.selectDataLeft = this.defaultDataRight
      this.$store.state.selectfilter = this.defaultDataRight.f
      this.$store.state.yesNoClickChange = false
      this.$store.state.timeNum = true
      this.$store.state.yesNoClickZZ = false
      this.$store.state.defaultShowLabelAreaState = 'normal'
    },
    // 点击5按钮切换图表
    cutStatic (ind) {
      // ind  0 1 2 3 4
      this.indStatic = ind
    },
    // top上的computed
    mouseoverAllCate (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标移动到')
      switch (ind) {
        case 5:
          this.titleDatas[ind].static = true
          break
        case 6:
          this.titleDatas[ind].static = true
          break
      }
    },
    mouseleaveAllCate (hierarchy, ind) {
      switch (ind) {
        case 5:
          this.titleDatas[ind].static = false
          this.titleDatas[5].threeText[0].static = false
          this.titleDatas[5].threeText[1].static = false
          break
        case 6:
          this.titleDatas[ind].static = false
          break
      }
      // console.log('鼠标离开')
    },
    clickAllCate (hierarchy, ind) {
      let that = this
      switch (ind) {
        case 0:
          this.$store.state.advancedSearchState = false
          this.cutStateSeach = 'simpleness'
          this.$router.go(0)
          break
        case 1:
          this.$store.state.advancedSearchState = true
          this.cutStateSeach = 'advanced'
          break
        case 2:
          if (this.$route.query.type === 'area') {
            this.cutStateSeach = 'map'
          } else {
            this.$store.state.advancedSearchState = false
            // alert('地图功能对非地区数据无效！')
            this.$alert('地图功能对非地区数据无效！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case 3:// 添加收藏
          if (this.$store.state.transBefore) {
            this.$store.state.addCollectState = true
          } else {
            this.$alert('暂无数据，无法进行收藏', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case 4:// 导出至excel！！
          if (this.$store.state.transBefore) {
            let brt = new ComputedData()
            let objData = null
            if (this.indStatic === 0) {
              objData = brt.exportDataAll(JSON.parse(JSON.stringify(this.$store.state.tableData)), JSON.parse(JSON.stringify(this.$store.state.tableLine)))
            } else {
              objData = brt.insertCollectS(JSON.parse(JSON.stringify(this.$store.state.tableData)), JSON.parse(JSON.stringify(this.$store.state.tableLine)), JSON.parse(JSON.stringify(this.$store.state.listInputVal)), JSON.parse(JSON.stringify(this.$store.state.lineInputVal)))
            }
            // 调用接口导出至excel
            this.$axios({
              method: 'POST',
              url: 'data/data/download',
              data: {
                classify: this.$store.state.selectDataLeft.id,
                tableData: objData.tableData,
                header: objData.header
              },
              responseType: 'blob'// 防止接收文件流乱码  格式blob
            }).then(res => {
              console.log(res, '导出至excel！！')
              // 请求接口完成   请求成功
              if (res.status === 200) {
                const a = document.createElement('a')
                a.download = res.headers['content-disposition'].split('"')[1]
                a.style.display = 'none'
                a.href = window.URL.createObjectURL(res.data)
                a.click()
                a.remove()
                window.URL.revokeObjectURL(window.URL.createObjectURL(res.data))
              }
            }).catch((fail) => {
              console.log(fail)
            })
          } else {
            this.$alert('暂无数据，无法进行导出操作！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case 5:
          break
        case 6:
          break
        case 'search':// 调接进行高级查询
          // 调用接口查询高级查询的数据
          console.log(this.$store.state.advanceData)
          if (this.$store.state.advanceData.length < 1) {
            // alert('筛选数据数据不能少于4条！')
            this.$alert('筛选数据数据不能少于1条！', '温馨提示', {
              confirmButtonText: '确定'
            })
            return
          } else if (this.$store.state.advanceData.length > 101) {
            this.$alert('最多选择100条数据进行查询！', '温馨提示', {
              confirmButtonText: '确定'
            })
            return
          }
          that.cutStateSeach = 'simpleness'
          that.advancedStates = true
          // 调用子组件 的方法渲染高级查询数据
          that.$store.state.advancedSearchState = true
          console.log(this.$store.state.dataArealabelTime, 'this.$store.state.dataArealabelTime')
          console.log(this.$store.state.advanceData, 'this.$store.state.advanceData')
          this.$store.state.advancedSelectClassfiid = this.$store.state.advanceData.map((item, index) => {
            return item.classify_id
          })
          this.$nextTick(() => {
            this.$store.state.defaultShowLabelAreaState = 'normal'
            console.log(this.$store.state.advancedSelectClassfiid, 'this.$store.state.advancedSelectClassfiid')
            // 左侧菜单数据
            this.$refs.childChartsCut.searchSelect(this.$store.state.selectDataLeft.f, null)
            this.getCateData()
            this.childChartContShow(this.$store.state.advancedSelectClassfiid)
            this.$store.state.labelIndexName = this.$store.state.advanceData[0].nameText
            this.$store.state.timeNum = true
          })
          break
      }
    },
    mouseoverCate (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标移动到')
      switch (ind) {
        case 2:
          this.titleDatas[5].secondText[ind].static = true
          break
      }
    },
    mouseleaveCate (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标离开')
      switch (ind) {
        case 2:
          this.titleDatas[5].threeText[0].static = false
          this.titleDatas[5].threeText[1].static = false
          this.titleDatas[5].secondText[ind].static = false
          break
      }
    },
    clickCate (hierarchy, ind, textType) {
      switch (textType) {
        case '新增指标':
          this.cutStatic(0)
          console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
          if (this.$store.state.transBefore) {
            this.$store.state.insertWindowState = true
          } else {
            this.$alert('暂无数据，新增指标功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '筛选':
          this.cutStatic(0)
          if (this.$store.state.transBefore) {
            this.$store.state.selcettWindowState = true
          } else {
            this.$alert('暂无数据，筛选功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '恢复':// 恢复
          this.cutStatic(0)
          if (this.$store.state.transBefore) {
            this.$router.go(0)
          } else {
            this.$alert('暂无数据，恢复功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '清除空行空列':// 清除空行空列
          this.cutStatic(0)
          // this.$router.go(0)
          // console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
          if (this.$store.state.transBefore) {
            if (this.$route.query.type === 'area') {
              // 先过滤每一行
              let firstHang = []// 过滤掉的下标=====》地区
              this.$store.state.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData.filter((item, index) => {
                if (item.every((item, index) => { return item === '' })) {
                  firstHang.push(index)
                }
                return !item.every((item, index) => {
                  return item === ''
                }) === true
              })
              // 在过滤每一列
              // 行列转置
              let brrCe = this.$store.state.transBefore.transBeforeAreaData
              this.$store.state.transBefore.transBeforeAreaData = brrCe[0].map(function (col, index) {
                return brrCe.map((row, key) => {
                  return row[index]
                })
              })
              // 在过滤每一行
              let secendHang = []// 过滤掉的下标=====》时间
              this.$store.state.transBefore.transBeforeAreaData = this.$store.state.transBefore.transBeforeAreaData.filter((item, index) => {
                if (item.every((item, index) => { return item === '' })) {
                  secendHang.push(index)
                }
                return !item.every((item, index) => {
                  return item === ''
                }) === true
              })
              // 行列转置
              let arrCe = this.$store.state.transBefore.transBeforeAreaData
              this.$store.state.transBefore.transBeforeAreaData = arrCe[0].map(function (col, index) {
                return arrCe.map((row, key) => {
                  return row[index]
                })
              })
              // 将时间和地区名过滤掉
              this.$store.state.transBefore.areaName = this.$store.state.transBefore.areaName.filter((item, index) => {
                return firstHang.indexOf(index) === -1
              })
              this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
                return secendHang.indexOf(index) === -1
              })
              console.log(this.$store.state.transBefore, 'this.$store.state.transBefore.transBeforeAreaData')
              this.showTableState = true
            } else { // 非地区数据
              // 先过滤每一行
              let firstHang = []// 过滤掉的下标=====》地区
              this.$store.state.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData.filter((item, index) => {
                if (item.every((item, index) => { return item === '' })) {
                  firstHang.push(index)
                }
                return !item.every((item, index) => {
                  return item === ''
                }) === true
              })
              // 在过滤每一列
              // 行列转置
              let brrCe = this.$store.state.transBefore.transBeforeTermsData
              this.$store.state.transBefore.transBeforeTermsData = brrCe[0].map(function (col, index) {
                return brrCe.map((row, key) => {
                  return row[index]
                })
              })
              // 在过滤每一行
              let secendHang = []// 过滤掉的下标=====》时间
              this.$store.state.transBefore.transBeforeTermsData = this.$store.state.transBefore.transBeforeTermsData.filter((item, index) => {
                if (item.every((item, index) => { return item === '' })) {
                  secendHang.push(index)
                }
                return !item.every((item, index) => {
                  return item === ''
                }) === true
              })
              // 行列转置
              let arrCe = this.$store.state.transBefore.transBeforeTermsData
              this.$store.state.transBefore.transBeforeTermsData = arrCe[0].map(function (col, index) {
                return arrCe.map((row, key) => {
                  return row[index]
                })
              })
              // 将时间和地区名过滤掉
              this.$store.state.transBefore.termsName = this.$store.state.transBefore.termsName.filter((item, index) => {
                return firstHang.indexOf(index) === -1
              })
              this.$store.state.transBefore.termsExplain = this.$store.state.transBefore.termsExplain.filter((item, index) => {
                return firstHang.indexOf(index) === -1
              })
              this.$store.state.transBefore.dataSource = this.$store.state.transBefore.dataSource.filter((item, index) => {
                return firstHang.indexOf(index) === -1
              })
              this.$store.state.transBefore.timeArr = this.$store.state.transBefore.timeArr.filter((item, index) => {
                return secendHang.indexOf(index) === -1
              })
              console.log(this.$store.state.transBefore, 'this.$store.state.transBefore.transBeforeAreaData')
              this.showTableState = true
            }
          } else {
            this.$alert('暂无数据，清除空行空列功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '编辑':
          this.cutStatic(0)
          if (this.$store.state.transBefore) {
            this.$store.state.editWindowState = true
          } else {
            this.$alert('暂无数据，编辑功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '转置':
          // 是否点击转置
          this.$store.state.yesNoClickZZ = !this.$store.state.yesNoClickZZ
          if (this.$store.state.befaultAfter === 'zz') {
            this.$store.state.befaultAfter = 'no'
          } else {
            this.$store.state.befaultAfter = 'zz'
          }
          this.cutStatic(0)
          if (this.$store.state.transBefore) {
            // 当前数据是地区数据时点击转置需要将数据进行转置
            if (this.$route.query.type === 'area') {
              // let transpositionData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData.transBeforeAreaData))
              // this.$store.state.allNochangeInitData.transBeforeAreaData = transpositionData[0].map(function (col, index) {
              //   return transpositionData.map((row, key) => {
              //     return row[index]
              //   })
              // })
              this.$store.state.transClickState = true
            }
            console.log(this.$store.state.transBefore, 'this.$store.state.transBefore0022555')
            // 改变转置状态
            let zhuanChange = {
              row: this.$store.state.SelecttDimension.col,
              col: this.$store.state.SelecttDimension.row
            }
            this.$store.state.SelecttDimension = zhuanChange
            console.log(this.$store.state.SelecttDimension, '非地区数据维度转换=》转置')
            this.change3Ds()
            this.chartsStatusMegger.transState = !this.chartsStatusMegger.transState
            this.$store.state.transState = this.chartsStatusMegger.transState
          } else {
            this.$alert('暂无数据，转置功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          // this.$refs.childChartCont.lieWidthComputed()
          break
        case '维度转换':
          this.cutStatic(0)
          if (this.$store.state.transBefore) {
            if (this.$route.query.type === 'area') {
              this.$store.state.dimensionState = true
            } else {
              this.$store.state.noAreadimensionState = true
            }
          } else {
            this.$alert('暂无数据，维度转换功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '保存默认':// 将分类id 和 分类数据存入本地
          this.cutStatic(0)
          // 获取本地保存数据
          if (this.$store.state.transBefore) {
            if (this.$route.query.type !== 'area') { // 非地区数据
              if (!this.$store.state.advancedSearchState) { // 非高级查询数据存默认数据
                if (JSON.parse(localStorage.getItem('classFiyData'))) { // 本地存在
                  let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
                  if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
                    arrtsBGY.push({
                      type: this.$route.query.type,
                      allNochangeInitData: this.$store.state.allNochangeInitData,
                      transBefore: this.$store.state.transBefore,
                      selectDate: {
                        time: this.$store.state.newSelectTime
                      },
                      selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
                      SelecttDimension: this.$store.state.SelecttDimension, // 左侧选中
                      advancedSearchState: this.$store.state.advancedSearchState
                    })
                    localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                  } else {
                    console.log('走这里')
                    arrtsBGY.find(item => item.type === this.$route.query.type).transBefore = this.$store.state.transBefore
                    arrtsBGY.find(item => item.type === this.$route.query.type).allNochangeInitData = this.$store.state.allNochangeInitData
                    arrtsBGY.find(item => item.type === this.$route.query.type).selectDate = {
                      time: this.$store.state.newSelectTime
                    }
                    arrtsBGY.find(item => item.type === this.$route.query.type).selectDataLeft = this.$store.state.selectDataLeft
                    arrtsBGY.find(item => item.type === this.$route.query.type).SelecttDimension = this.$store.state.SelecttDimension
                    arrtsBGY.find(item => item.type === this.$route.query.type).advancedSearchState = this.$store.state.advancedSearchState

                    localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                  }
                } else { // 本地不存在
                  localStorage.setItem('classFiyData', JSON.stringify([{
                    type: this.$store.state.selectDataLeft.f,
                    allNochangeInitData: this.$store.state.allNochangeInitData,
                    transBefore: this.$store.state.transBefore,
                    selectDate: {
                      time: this.$store.state.newSelectTime
                    },
                    selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
                    SelecttDimension: this.$store.state.SelecttDimension,
                    advancedSearchState: this.$store.state.advancedSearchState
                  }]))
                }
              } else { // 高级查询保存默认数据
                if (JSON.parse(localStorage.getItem('classFiyData'))) { // 本地存在
                  let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
                  if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
                    arrtsBGY.push({
                      type: this.$route.query.type,
                      allNochangeInitData: this.$store.state.allNochangeInitData,
                      transBefore: this.$store.state.transBefore,
                      selectDate: {
                        time: this.$store.state.newSelectTime
                      },
                      selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
                      SelecttDimension: this.$store.state.SelecttDimension, // 左侧选中
                      advancedSearchState: this.$store.state.advancedSearchState, // 高级查询状态
                      advanceData: this.$store.state.advanceData, // 高级查询数据
                      areaIndexName: this.$store.state.areaIndexName, // 地区名称
                      labelIndexName: this.$store.state.labelIndexName // 指标名称
                    })
                    localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                  } else {
                    console.log('走这里')
                    arrtsBGY.find(item => item.type === this.$route.query.type).transBefore = this.$store.state.transBefore
                    arrtsBGY.find(item => item.type === this.$route.query.type).allNochangeInitData = this.$store.state.allNochangeInitData
                    arrtsBGY.find(item => item.type === this.$route.query.type).selectDate = {
                      time: this.$store.state.newSelectTime
                    }
                    arrtsBGY.find(item => item.type === this.$route.query.type).selectDataLeft = this.$store.state.selectDataLeft
                    arrtsBGY.find(item => item.type === this.$route.query.type).SelecttDimension = this.$store.state.SelecttDimension
                    arrtsBGY.find(item => item.type === this.$route.query.type).advancedSearchState = this.$store.state.advancedSearchState
                    arrtsBGY.find(item => item.type === this.$route.query.type).advanceData = this.$store.state.advanceData
                    arrtsBGY.find(item => item.type === this.$route.query.type).areaIndexName = this.$store.state.areaIndexName
                    arrtsBGY.find(item => item.type === this.$route.query.type).labelIndexName = this.$store.state.labelIndexName

                    localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                  }
                } else { // 本地不存在
                  localStorage.setItem('classFiyData', JSON.stringify([{
                    type: this.$store.state.selectDataLeft.f,
                    allNochangeInitData: this.$store.state.allNochangeInitData,
                    transBefore: this.$store.state.transBefore,
                    selectDate: {
                      time: this.$store.state.newSelectTime
                    },
                    selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
                    SelecttDimension: this.$store.state.SelecttDimension,
                    advancedSearchState: this.$store.state.advancedSearchState, // 高级查询状态
                    advanceData: this.$store.state.advanceData, // 高级查询数据
                    areaIndexName: this.$store.state.areaIndexName, // 地区名称
                    labelIndexName: this.$store.state.labelIndexName // 指标名称
                  }]))
                }
              }
            } else { // 地区数据
              if (!this.$store.state.advancedSearchState) { // 非高级查询数据存默认数据
                if (JSON.parse(localStorage.getItem('classFiyData'))) { // 本地存在
                  let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
                  if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
                    let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
                    if (this.$store.state.yesNoClickZZ) {
                      let btyAreaData = btyData.transBeforeAreaData
                      btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
                        return btyAreaData.map((row, key) => {
                          return row[index]
                        })
                      })
                    }
                    arrtsBGY.push({
                      type: this.$route.query.type,
                      allNochangeInitData: btyData,
                      transBefore: btyData,
                      selectDate: {
                        time: this.$store.state.newSelectTime,
                        sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
                      },
                      selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
                      SelecttDimension: this.$store.state.SelecttDimension,
                      yesNoClickChange: this.$store.state.yesNoClickChange, // 维度转换是否被点击
                      yesNoClickZZ: this.$store.state.yesNoClickZZ, // 转置是否被点击
                      advancedSearchState: this.$store.state.advancedSearchState
                    })
                    localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                  } else {
                    console.log('走这里')
                    let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
                    if (this.$store.state.yesNoClickZZ) {
                      let btyAreaData = btyData.transBeforeAreaData
                      btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
                        return btyAreaData.map((row, key) => {
                          return row[index]
                        })
                      })
                    }
                    arrtsBGY.find(item => item.type === this.$route.query.type).transBefore = btyData
                    arrtsBGY.find(item => item.type === this.$route.query.type).allNochangeInitData = btyData
                    arrtsBGY.find(item => item.type === this.$route.query.type).selectDate = {
                      time: this.$store.state.newSelectTime,
                      sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
                    }
                    arrtsBGY.find(item => item.type === this.$route.query.type).selectDataLeft = this.$store.state.selectDataLeft
                    arrtsBGY.find(item => item.type === this.$route.query.type).SelecttDimension = this.$store.state.SelecttDimension
                    arrtsBGY.find(item => item.type === this.$route.query.type).yesNoClickChange = this.$store.state.yesNoClickChange
                    arrtsBGY.find(item => item.type === this.$route.query.type).yesNoClickZZ = this.$store.state.yesNoClickZZ
                    arrtsBGY.find(item => item.type === this.$route.query.type).advancedSearchState = this.$store.state.advancedSearchState
                    localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                  }
                } else { // 本地不存在
                  let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
                  if (this.$store.state.yesNoClickZZ) {
                    let btyAreaData = btyData.transBeforeAreaData
                    btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
                      return btyAreaData.map((row, key) => {
                        return row[index]
                      })
                    })
                  }
                  localStorage.setItem('classFiyData', JSON.stringify([{
                    type: this.$route.query.type,
                    allNochangeInitData: btyData,
                    transBefore: btyData,
                    selectDate: {
                      time: this.$store.state.newSelectTime,
                      sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
                      // sequenceCont:,//序列选中内容
                      // sequenceState://序列状态 筛选指标   筛选地区
                    },
                    selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
                    SelecttDimension: this.$store.state.SelecttDimension, // 行列代表的是指标、地区、时间
                    yesNoClickChange: this.$store.state.yesNoClickChange, // 维度转换是否被点击
                    yesNoClickZZ: this.$store.state.yesNoClickZZ, // 维度转换是否被点击
                    advancedSearchState: this.$store.state.advancedSearchState
                  }]))
                }
              } else { // 高级查询数据存默认数据
                if (JSON.parse(localStorage.getItem('classFiyData'))) { // 本地存在
                  let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
                  if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
                    let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
                    if (this.$store.state.yesNoClickZZ) {
                      let btyAreaData = btyData.transBeforeAreaData
                      btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
                        return btyAreaData.map((row, key) => {
                          return row[index]
                        })
                      })
                    }
                    arrtsBGY.push({
                      type: this.$route.query.type,
                      allNochangeInitData: btyData,
                      transBefore: btyData,
                      selectDate: {
                        time: this.$store.state.newSelectTime,
                        sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
                      },
                      selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
                      SelecttDimension: this.$store.state.SelecttDimension,
                      yesNoClickChange: this.$store.state.yesNoClickChange, // 维度转换是否被点击
                      yesNoClickZZ: this.$store.state.yesNoClickZZ, // 转置是否被点击
                      advancedSearchState: this.$store.state.advancedSearchState, // 高级查询状态
                      advanceData: this.$store.state.advanceData, // 高级查询数据
                      areaIndexName: this.$store.state.areaIndexName, // 地区名称
                      labelIndexName: this.$store.state.labelIndexName // 指标名称
                    })
                    localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                  } else {
                    console.log('走这里')
                    let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
                    if (this.$store.state.yesNoClickZZ) {
                      let btyAreaData = btyData.transBeforeAreaData
                      btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
                        return btyAreaData.map((row, key) => {
                          return row[index]
                        })
                      })
                    }
                    arrtsBGY.find(item => item.type === this.$route.query.type).transBefore = btyData
                    arrtsBGY.find(item => item.type === this.$route.query.type).allNochangeInitData = btyData
                    arrtsBGY.find(item => item.type === this.$route.query.type).selectDate = {
                      time: this.$store.state.newSelectTime,
                      sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
                    }
                    arrtsBGY.find(item => item.type === this.$route.query.type).selectDataLeft = this.$store.state.selectDataLeft
                    arrtsBGY.find(item => item.type === this.$route.query.type).SelecttDimension = this.$store.state.SelecttDimension
                    arrtsBGY.find(item => item.type === this.$route.query.type).yesNoClickChange = this.$store.state.yesNoClickChange
                    arrtsBGY.find(item => item.type === this.$route.query.type).yesNoClickZZ = this.$store.state.yesNoClickZZ
                    arrtsBGY.find(item => item.type === this.$route.query.type).advancedSearchState = this.$store.state.advancedSearchState
                    arrtsBGY.find(item => item.type === this.$route.query.type).advanceData = this.$store.state.advanceData
                    arrtsBGY.find(item => item.type === this.$route.query.type).areaIndexName = this.$store.state.areaIndexName
                    arrtsBGY.find(item => item.type === this.$route.query.type).labelIndexName = this.$store.state.labelIndexName
                    localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                  }
                } else { // 本地不存在
                  let btyData = JSON.parse(JSON.stringify(this.$store.state.allNochangeInitData))
                  if (this.$store.state.yesNoClickZZ) {
                    let btyAreaData = btyData.transBeforeAreaData
                    btyData.transBeforeAreaData = btyAreaData[0].map((col, index) => {
                      return btyAreaData.map((row, key) => {
                        return row[index]
                      })
                    })
                  }
                  localStorage.setItem('classFiyData', JSON.stringify([{
                    type: this.$route.query.type,
                    allNochangeInitData: btyData,
                    transBefore: btyData,
                    selectDate: {
                      time: this.$store.state.newSelectTime,
                      sequence: this.$store.state.yesNoClickChange ? { sequenceCont: this.$store.state.newSelectChangeData, sequenceState: 3 } : this.$store.state.newSelectLabelArea
                      // sequenceCont:,//序列选中内容
                      // sequenceState://序列状态 筛选指标   筛选地区
                    },
                    selectDataLeft: this.$store.state.selectDataLeft, // 左侧选中
                    SelecttDimension: this.$store.state.SelecttDimension, // 行列代表的是指标、地区、时间
                    yesNoClickChange: this.$store.state.yesNoClickChange, // 维度转换是否被点击
                    yesNoClickZZ: this.$store.state.yesNoClickZZ, // 维度转换是否被点击
                    advancedSearchState: this.$store.state.advancedSearchState, // 高级查询状态
                    advanceData: this.$store.state.advanceData, // 高级查询数据
                    areaIndexName: this.$store.state.areaIndexName, // 地区名称
                    labelIndexName: this.$store.state.labelIndexName // 指标名称
                  }]))
                }
              }
            }
            this.$alert('默认数据已保存！', '温馨提示', {
              confirmButtonText: '确定'
            })
          } else {
            this.$alert('暂无数据，保存默认功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
        case '恢复默认':// 将分类id 和 分类数据从本地删除
          this.cutStatic(0)
          if (this.$store.state.transBefore) {
            if (JSON.parse(localStorage.getItem('classFiyData'))) {
              let arrtsBGY = JSON.parse(localStorage.getItem('classFiyData'))
              console.log(arrtsBGY)
              if (!arrtsBGY.find(item => item.type === this.$route.query.type)) {
                this.$alert('默认数据已恢复！', '温馨提示', {
                  confirmButtonText: '确定',
                  callback: actioon => {
                    this.$router.go(0)
                  }
                })
              } else {
                arrtsBGY = arrtsBGY.filter((item, index) => {
                  console.log(item, 'item0')
                  return item.type !== this.$route.query.type
                })
                if (arrtsBGY.length > 0) {
                  localStorage.setItem('classFiyData', JSON.stringify(arrtsBGY))
                } else {
                  localStorage.removeItem('classFiyData')
                }
                this.$alert('默认数据已恢复！', '温馨提示', {
                  confirmButtonText: '确定',
                  callback: actioon => {
                    this.$router.go(0)
                  }
                })
              }
            } else {
              this.$alert('默认数据已恢复！', '温馨提示', {
                confirmButtonText: '确定',
                callback: actioon => {
                  this.$router.go(0)
                }
              })
            }
          } else {
            this.$alert('暂无数据，恢复默认功能无法使用！', '温馨提示', {
              confirmButtonText: '确定'
            })
          }
          break
      }
    },
    mouseoverThree (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标离开')
      switch (ind) {
        case 0:
          this.titleDatas[5].threeText[ind + 1].static = false
          this.titleDatas[5].threeText[ind].static = true
          break
        case 1:
          this.titleDatas[5].threeText[ind - 1].static = false
          this.titleDatas[5].threeText[ind].static = true
          break
      }
    },
    mouseleaveThree (hierarchy, ind) {
      // console.log(hierarchy, ind, '鼠标离开')
      switch (ind) {
        case 0:
          // this.titleDatas[5].threeText[ind].static = false
          break
        case 1:
          // this.titleDatas[5].threeText[ind].static = false
          break
      }
    },
    // 对行运算
    computedLine (typeText) {
      switch (typeText) {
        case 'SUM求和':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'x平均数':// 注意x小写
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'MAX最大值':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'MIN最小值':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'MD中位数':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'MO众数':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'S²方差':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
        case 'S标准差':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'line'
          }
          break
      }
    },
    // 对列运算
    computedList (typeText) {
      switch (typeText) {
        case 'SUM求和':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'x平均数':// 注意x小写
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'MAX最大值':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'MIN最小值':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'MD中位数':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'MO众数':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'S²方差':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
        case 'S标准差':
          console.log(typeText)
          this.chartsStatusMegger.computedStatic = {
            text: typeText, stateType: 'list'
          }
          break
      }
    },
    // 当数据不是从导航进来时找到其选中其选中的数据作为默认的左侧选中数据
    defaultDataSelectDG () { // 此方法返回一个默认选中的代码数组
      let defaultCodeIndex = null
      let objectData = null
      // 最终默认选中
      this.leftCateData.forEach((item1, index1) => {
        if (this.$route.query.defaultLeftId.toString() === item1.id) {
          defaultCodeIndex = [index1]
          objectData = item1
          console.log(111)
        } else {
          if (item1.children !== undefined) {
            item1.children.forEach((item2, index2) => {
              if (this.$route.query.defaultLeftId.toString() === item2.id) {
                defaultCodeIndex = [index1, index2]
                objectData = item2
                console.log(222)
              } else {
                if (item2.children !== undefined) {
                  item2.children.forEach((item3, index3) => {
                    if (this.$route.query.defaultLeftId.toString() === item3.id) {
                      defaultCodeIndex = [index1, index2, index3]
                      objectData = item3
                      console.log(defaultCodeIndex, objectData, 333)
                    } else {
                      if (item3.children !== undefined) {
                        item3.children.forEach((item4, index4) => {
                          if (this.$route.query.defaultLeftId.toString() === item4.id) {
                            defaultCodeIndex = [index1, index2, index3, index4]
                            objectData = item4
                            console.log(444)
                          } else {
                            if (item4.children !== undefined) {
                              item4.children.forEach((item5, index5) => {
                                if (this.$route.query.defaultLeftId.toString() === item5.id) {
                                  defaultCodeIndex = [index1, index2, index3, index4, index5]
                                  objectData = item5
                                  console.log(555)
                                }
                              })
                            }
                          }
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        }
      })
      this.filterDataArr = {
        defaultCode: defaultCodeIndex.map((item, index) => {
          return defaultCodeIndex.filter((list, key) => { return key <= index }).join('-')
        }),
        objectData: objectData
      }
    },
    // 默认选中的列
    defaultSelectLie () {
      console.log(this.leftCateData, 'this.leftCateDatathis.leftCateDatathis.leftCateData')
      console.log(this.$route.query.defaultLeftId, 'this.$router.query.defaultLeftId')
      // 非高级查询
      if (!this.$store.state.advancedSearchState) {
        if (this.$route.query.defaultLeftId !== 'default') { // 从数据更新，快速
          this.defaultDataSelectDG()
          console.log(this.filterDataArr, '非导航左侧选中')
          console.log(this.filterDataArr.defaultCode, '代码')
          this.defaultSelectLies = this.filterDataArr.defaultCode
          this.$store.state.openOpenLeft = this.filterDataArr.defaultCode
          this.$store.state.selectDataLeft = this.filterDataArr.objectData
          this.defaultDataRight = this.filterDataArr.objectData
          this.$store.state.selectfilter = this.filterDataArr.objectData.f
        } else {
          // 处理默认显示数据
          this.defaultShowData()
        }
      }
    },
    // 默认选中的数据
    defaultShowData () {
      // 调用子组件showSaveDefaultData方法显示默认数据
      // this.$refs.childChartCont.showSaveDefaultData()
      // 本地存在保存的数据
      // 调用接口请求默认显示数据
      let arrData = localStorage.getItem('classFiyData')
      if (!arrData) {
        this.$axios({
          method: 'GET',
          url: 'data/data/default',
          params: {
            type: this.$route.query.type
          }
        }).then(res => {
          console.log(res, '默认展示id10')
          this.$store.state.defaultDataId = res.data.data
          this.$store.state.selectDataLeft = res.data.data
          this.$store.state.selectfilter = this.$store.state.defaultDataId.f
          this.$refs.childChartsCut.searchSelect(this.$store.state.defaultDataId.f, 'default3')
          this.$refs.childChartCont.getInfor(this.$store.state.defaultDataId.id)
        })
        return
      }
      if (JSON.parse(arrData).find(item => item.type === this.$route.query.type)) {
        this.$store.state.defaultShowLabelAreaState = 'defaultLocal'
        console.log(JSON.parse(arrData).find(item => item.type === this.$route.query.type))
        // 调用子组件 searchSelect 方法渲染下拉
        // 赋值数据
        this.$store.state.selectDataLeft = JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDataLeft
        console.log(JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate.time.value, '全职0')
        this.$store.state.selectData = JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate.time.value
        console.log(this.$store.state.selectDataLeft, '赋值数据')
        this.$store.state.selectfilter = this.$store.state.selectDataLeft.f
        this.$store.state.SelecttDimension = JSON.parse(arrData).find(item => item.type === this.$route.query.type).SelecttDimension
        this.$store.state.yesNoClickZZ = JSON.parse(arrData).find(item => item.type === this.$route.query.type).yesNoClickZZ
        this.$store.state.yesNoClickChange = JSON.parse(arrData).find(item => item.type === this.$route.query.type).yesNoClickChange
        this.$store.state.advancedSearchState = JSON.parse(arrData).find(item => item.type === this.$route.query.type).advancedSearchState
        // 高级查询
        if (this.$store.state.advancedSearchState) {
          this.$store.state.advanceData = JSON.parse(arrData).find(item => item.type === this.$route.query.type).advanceData
          this.$store.state.areaIndexName = JSON.parse(arrData).find(item => item.type === this.$route.query.type).areaIndexName
          this.$store.state.labelIndexName = JSON.parse(arrData).find(item => item.type === this.$route.query.type).labelIndexName
        }
        if (this.$route.query.type === 'area') {
          let changeDarat = JSON.parse(JSON.stringify(JSON.parse(arrData).find(item => item.type === this.$route.query.type).allNochangeInitData))
          this.$store.state.transBefore = JSON.parse(JSON.stringify(changeDarat))
          this.$store.state.noChangeData = JSON.parse(JSON.stringify(changeDarat))
          this.$store.state.allNochangeInitData = JSON.parse(JSON.stringify(changeDarat))
          this.$store.state.newSelectLabelArea = JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate.sequence
          this.$store.state.areaDimensionState = JSON.parse(arrData).find(item => item.type === this.$route.query.type).yesNoClickChange
          this.$store.state.yesNoClickChange = JSON.parse(arrData).find(item => item.type === this.$route.query.type).yesNoClickChange
        } else {
          this.$store.state.transBefore = JSON.parse(arrData).find(item => item.type === this.$route.query.type).allNochangeInitData
          this.$store.state.noChangeData = JSON.parse(JSON.stringify(this.$store.state.transBefore))
          this.$store.state.allNochangeInitData = JSON.parse(arrData).find(item => item.type === this.$route.query.type).allNochangeInitData
        }
        console.log(this.$store.state.SelecttDimension, 'this.$store.state.advancedSearchState0000000000000000000000')
        if (this.$store.state.yesNoClickChange && this.$route.query.type === 'area') {
          if ((this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'sj') || (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'zb')) {
            this.$store.state.noSelecttDimension = 'dq'
          } else if ((this.$store.state.SelecttDimension.col === 'dq' && this.$store.state.SelecttDimension.row === 'sj') || (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'dq')) {
            this.$store.state.noSelecttDimension = 'zb'
          } else if ((this.$store.state.SelecttDimension.col === 'dq' && this.$store.state.SelecttDimension.row === 'zb') || (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'dq')) {
            this.$store.state.noSelecttDimension = 'sj'
          }
          this.$store.state.newSelectChangeData = [JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate.sequence.sequenceCont]
        }
        this.$refs.childChartsCut.searchSelect(JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDataLeft.f, JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDate)
        this.$refs.childChartCont.getInfor(JSON.parse(arrData).find(item => item.type === this.$route.query.type).selectDataLeft.id)
        if (this.$store.state.advancedSearchState) {
          this.$refs.childChartCont.advancedSearchDataShow()
        }
      } else {
        this.$axios({
          method: 'GET',
          url: 'data/data/default',
          params: {
            type: this.$route.query.type
          }
        }).then(res => {
          console.log(res, '默认展示id')
          this.$store.state.defaultDataId = res.data.data
          this.$store.state.selectDataLeft = res.data.data
          this.$store.state.selectfilter = this.$store.state.defaultDataId.f
          this.$refs.childChartsCut.searchSelect(this.$store.state.defaultDataId.f, 'default3')
          this.$refs.childChartCont.getInfor(this.$store.state.defaultDataId.id)
        })
      }
    },
    comTime (res) {
      console.log(res, '被选中的111')
      this.downLaSelect = res.extendData
    },
    // 接收子组件传值新增指标
    emitStatesd (val) {
      console.log(val, 'val')
      if (val) {
        console.log(val)
        this.statesDf = 2
      } else {
        this.statesDf = 1
      }
    },
    // 重置参数
    tellAreadly (val) {
      this.statesDf = val
    },
    // 接收并且改变参数
    stateTell (val) {
      this.stateTells = val
    },
    // 重置参数
    prentsState (val) {
      this.stateTells = val
      this.labelAreaState = true
    },
    // 改变状态
    stateDataGet (val) {
      this.stateDataGetVal = val
    },
    stateDFGHJ (val) {
      this.stateDataGetVal = val
      this.labelAreaState = false
      // 恢复最初的选择
    },
    // 地区数据下拉发生变化
    statertfResu (val) {
      console.log(val, '1010110')
      this.downLaSelectArea = val
      this.indStatic = 0
      // 调用childChartCont组件方法获取数据
      this.$refs.childChartCont.downLaSelectArea(this.downLaSelectArea)
    },
    // 重置清除空行空列状态
    statertyui (val) {
      this.showTableState = val
    },
    // 重置维度转换状态
    emmitStateAd (val) {
      // this.areaDimensionStateS = val
    },
    // 重置高级查询状态
    tellParentsShowClos (val) {
      this.advancedStates = val
    },
    // 改变状态
    tellChangeFan (val) {
      this.labelAreaStateks = val
    },
    // 调用子组件的方法
    changeBrother () {
      this.$refs.childChartCont.brotherFuncShowData()
    },
    // 调用子组件的方法
    changeDimensionTrueChangeArea (res) {
      this.$refs.childDimension.trueChangeArea(res)
    },
    // 调用子组件的方法重置数据
    changeScreenCom () {
      this.$refs.childChartCont.initTableData()
    },
    // 调用子组件的方法重置筛选数据
    childChartsCutShow () {
      console.log('kfa555')
      this.$refs.childChartsCut.showLabelArea()
    },
    // 调用子组件的方法重置筛选数据
    childChartContShow (res) {
      this.$refs.childChartCont.getInfor(res)
    },
    // 调用子组件的方法重置维度转换下拉筛选数据
    changeCutShow () {
      this.$refs.childChartsCut.areaDimensionDo(true)
      // 重置三维转换默认选中
      this.$refs.childDimension.change3D()
    },
    // 调用子组件的方法重置维度转换下拉筛选数据
    change3Ds () {
      // 重置三维转换默认选中
      this.$refs.childDimension.change3D()
    }
  },
  computed: {
    // 计算字符串
    computedStr () {
      return (str) => {
        let Strs = ''
        str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
        return Strs
      }
    },
    // 根据传入的数值计算出实际px值
    computedNumberPx () {
      return (pszhi) => {
        let sizes = 160 / ((1920 - 17) / document.body.clientWidth) / 10 / 16 * pszhi
        return sizes
      }
    },
    // 根据传入的值计算出实际的rem值
    computedNumberRem () {
      return (pszhi) => {
        let sizes = pszhi / (160 / ((1920 - 17) / document.body.clientWidth) / 10 / 16) / 16
        return sizes
      }
    },
    // 计算文字显示状态
    computStatic () {
      return (index, arr) => {
        let staticd = false
        if (((arr.length - 1) === index) || (arr.length - 2) === index) {
          staticd = false
        } else {
          staticd = true
        }
        return staticd
      }
    }
  },
  mounted () {
    this.dataPos = this.$route.query.type
    // console.log(this.$route.query.type)
    this.initValue = this.computedNumberPx(200)
    // console.log(this.computedNumberPx(200))
    // 获取菜单信息
    this.getCateData()
    if (this.$route.query.type !== 'area') {
      this.$store.state.SelecttDimension = {
        row: 'sj',
        col: 'zb'
      }
    } else {
      this.$store.state.SelecttDimension = {
        row: 'sj',
        col: 'dq'
      }
    }
  },
  updated () {
    // console.log(this.defaultDataRight, 'this.defaultSelectLies')
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-menu-item,
/deep/.el-submenu__title {
  height: 42px !important;
}
/deep/ .el-col-24 {
  min-width: 100%;
  width: auto;
}
/deep/ .el-menu {
  border: none;
}
/deep/ .el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  color: #8fa3ae;
}
// .el-menu--horizontal .el-menu .el-menu-item,
// .el-menu--horizontal .el-menu .el-submenu__title:hover {
//   color: #52b6e3;
// }
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
  color: #8fa3ae;
}
/deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  color: #52b6e3;
}
/deep/ .el-menu.el-menu--horizontal {
  border: none;
}
/deep/ .el-submenu__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-flow: row-reverse;
  // border: 1px solid red;
  padding: 0;
}
/deep/ .el-submenu__icon-arrow {
  position: static;
  margin-top: 0.25rem;
  margin-right: 0.42rem;
  // left: 0;
  // right: auto;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .swipersty {
    width: 100%;
    height: 33.25rem;
  }
  & > .content_cont {
    width: 84.25rem;
    // border: 1px solid red;
    & > .mainCont {
      // margin-top: 3.125rem;
      margin-bottom: 3.125rem;
      width: 100%;
      // border: 0.0625rem solid red;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      & > .header {
        width: 84.25rem;
        height: 4.25rem;
        // border: 1px solid red;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        & > .left {
          // margin-left: 1.5rem;
          font-size: 1.5rem;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0.125rem;
          color: #000000;
        }
        & > .right {
          // margin-right: 1.5rem;
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #8fa3ae;
          & > img {
            width: 1rem;
            height: 1.25rem;
            margin-right: 0.45rem;
          }
          & > span:nth-child(n + 3):hover {
            cursor: pointer;
            color: #52b6e3;
          }
        }
      }
      & > .data_title {
        width: 100%;
        height: 5.875rem;
        background-color: #ffffff;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        & > .searchData {
          margin-left: 17.5625rem;
          width: 7.875rem;
          height: 3.125rem;
          background-color: #52b6e3;
          border-radius: 0.1875rem;
          color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 1.25rem;
        }
        & > .searchData:hover {
          cursor: pointer;
        }
        .title_relative {
          position: relative;
          & > .title_div {
            padding: 0.3625rem 0;
            position: absolute;
            top: 2.8rem;
            left: -3.2rem;
            z-index: 10;
            border: 1px solid #bdbdbd;
            width: 10rem;
            background-color: #fff;
            border-radius: 0.625rem;
            & > div {
              position: relative;
              padding: 0.255rem 1.125rem;
              & > .secondWindow {
                padding: 0.3625rem 0;
                position: absolute;
                top: 0rem;
                left: 10rem;
                z-index: 10;
                border: 1px solid #bdbdbd;
                width: 10rem;
                background-color: #fff;
                border-radius: 0.625rem;
                & > div {
                  padding: 0.255rem 1.125rem;
                  color: #8fa3ae;
                  & > div {
                    position: relative;
                    & > .threeWindow {
                      padding: 0.3625rem 0;
                      position: absolute;
                      top: -1rem;
                      left: -11.275rem;
                      z-index: 10;
                      border: 1px solid #bdbdbd;
                      width: 10rem;
                      background-color: #fff;
                      border-radius: 0.625rem;
                      & > div {
                        padding: 0.255rem 1.125rem;
                        color: #8fa3ae;
                      }
                      & > div:hover {
                        background-color: #52b6e3;
                        color: #fff;
                      }
                    }
                  }
                }
                & > div:hover {
                  background-color: #52b6e3;
                  color: #fff;
                }
              }
            }
            & > div:hover {
              background-color: #52b6e3;
              color: #fff;
            }
          }
        }
        & > div {
          height: 5.875rem;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #8fa3ae;
          & > img {
            margin-right: 0.625rem;
            width: 1.375rem;
            height: 1.375rem;
          }
        }
        & > div:nth-child(3) {
          margin-right: 10.125rem;
        }
        & > div:hover {
          cursor: pointer;
        }
      }
      & > .data_content {
        position: relative;
        margin-top: 1.25rem;
        width: 100%;
        height: 50rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        // border: 1px solid red;
        & > .data_left {
          overflow: auto;
          // width: 25.375rem;
          // height: 50.25rem;
          background-color: #ffffff;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 1);
        }
        .data_center {
          width: 0.75rem;
          // height: 9.86rem;
          background-color: #8fa3ae;
          font-size: 0.75rem;
          color: #fff;
          letter-spacing: 0.1865rem;
        }

        & > .data_center:hover {
          cursor: w-resize;
          cursor: e-resize;
          user-select: none;
        }
        & > .data_right {
          // width: 58.125rem;
          // height: 50.25rem;
          background-color: #ffffff;
          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        }
        // 拖动
        & > .container {
          width: 25rem;
          height: 9.86rem;
          position: absolute;
          left: 12.6875rem;
          // border: 1px solid black;
          pointer-events: none;
          /deep/.vdr.active:before {
            outline: none;
          }
        }
        & > .container:hover {
          cursor: w-resize;
        }
      }
      & > .advancedStyle {
        margin-top: 0.75rem;
        width: 100%;
        height: 5.875rem;
        background-color: #ffffff;
        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        & > div {
          margin-right: 1.5625rem;
          width: 7.875rem;
          height: 3.125rem;
          background-color: #52b6e3;
          border-radius: 0.1875rem;
          color: #fff;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 1.25rem;
        }
        & > div:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
